import ScaleBox from "@/components/ScaleBox/ScaleBox.vue";
import MainBus from "@/components/controls/mainBus.vue";
import { EventBus } from "@/tools/bus";
import { wsSend } from "@/tools/sendMessage";
import { submitOperateRecord } from "@/api/api";
import NumScreen from "@/components/controls/numScreen.vue";
import ConnectLine from "@/components/controls/connect-line.vue";
import TerminalSvg from "@/components/controls/terminal-svg.vue";
import RectSvg from "@/components/controls/rect-svg.vue";
import showcheSvg from "@/components/controls/shou-che-svg1.vue";

export default {
	name: 'mainGraph',
	components: {
		ScaleBox,
		MainBus,
		ConnectLine,
		TerminalSvg,
		RectSvg,
		showcheSvg,
		NumScreen
	},
	data() {
		return {
			pageData:null,
			
		}
	},
	beforeCreate() {
	  this.$store.commit('setWsHandled',false)
	},
	
	created() {
		EventBus.$on('ws-connected', this.handleWSConnected)
		if (this.$store.state.ws && this.$store.state.ws.readyState === WebSocket.OPEN) {
		  this.handleWSConnected()
		}
	},
	methods: {
		// 清闪
		clearAll() {
			wsSend({ "cmd": "switchAllClear" })
			submitOperateRecord({ log_desc: '全站清闪' },false)
		},
		
		handleWSConnected() {
		  if (this.$store.state.wsHandled) return
		  this.$store.commit('setWsHandled',true)
		  wsSend({ cmd: 'getMonitorMainPage' })
		},
		messageHandle(data){
		  if (data.cmd==='getMonitorMainPage'){
		     this.pageData = JSON.parse(JSON.stringify(data.data))
		    console.log(JSON.parse(JSON.stringify(this.pageData)),'主图数据')
		  }
		},
		startDrag(e) {
		  e.preventDefault();
		  const el = this.$refs.page;
		  this.isDragging = true;
		  this.startX = e.clientX;
		  this.startY = e.clientY;
		  this.scrollLeft = el.scrollLeft;
		  this.scrollTop = el.scrollTop;
		
		  window.addEventListener("mousemove", this.onDrag);
		  window.addEventListener("mouseup", this.stopDrag);
		},
		onDrag(e) {
		  if (!this.isDragging) return;
		  e.preventDefault();
		
		  const dx = e.clientX - this.startX;
		  const dy = e.clientY - this.startY;
		
		  cancelAnimationFrame(this.dragAnimationFrame);
		
		  this.dragAnimationFrame = requestAnimationFrame(() => {
		    const el = this.$refs.page;
		    if (!el) return;
		
		    el.scrollLeft = this.scrollLeft - dx;
		    el.scrollTop = this.scrollTop - dy;
		  });
		},
		stopDrag() {
		  this.isDragging = false;
		  cancelAnimationFrame(this.dragAnimationFrame);
		  window.removeEventListener("mousemove", this.onDrag);
		  window.removeEventListener("mouseup", this.stopDrag);
		},
	},
	mounted() {
		EventBus.$on("ws-message",this.messageHandle)
		this.$store.commit('setMainPage',true)
	},
	beforeDestroy() {
	  EventBus.$off("ws-message",this.messageHandle)
	  EventBus.$off('ws-connected')
	  this.$store.commit('setMainPage',false)
	},
	destroyed() {
		
	},
	watch: {
		
	}
}
